<template>
    <el-row class="wapper">
        <el-row class="crumbs">旅游攻略 / 攻略详情</el-row>
        <el-row class="detail-container">
            <h1>{{detail.title}}</h1>
            <el-row class="other">
                <span>时间：{{detail.created_at}}</span>
                <span>阅读：{{detail.watch}}</span>
            </el-row>
            <el-row class="content" v-html="detail.content"></el-row>
        </el-row>
        <el-row class="about" type="flex" justify="center">
            <el-row class="comment">
                <i class="iconfont iconpinglun"></i>
                <span>评论({{count}})</span>
            </el-row>
            <el-row class="share">
                <i class="iconfont iconfenxiang"></i>
                <span>分享</span>
            </el-row>
        </el-row>
        <Comment @loadCommentCount="getCommentCount" />
    </el-row>
</template>

<script>
import moment from "moment"
import Comment from '@/components/tourismStrategy/comment/Comment'
export default {
    data(){
        return{
            detail:{},
            count:0
        }
    },
    components:{
        Comment
    },
    watch:{
        $route:{
            handler(){
                this.loadStrategyDetail();
            },
            immediate: true
        }
    },
    methods:{
        loadStrategyDetail(){
            this.$axios({
                url:'/posts/'+this.$route.query.id
            }).then(res => {
                this.detail = res.data;
                //处理数据
                for(let key in this.detail){
                    if(key == 'created_at' && this.detail[key]){
                        this.detail[key] = moment(parseInt(this.detail['created_at'])).format('YYYY-MM-DD hh:mm');
                    }
                    if(key == 'watch' && !this.detail[key]){
                        this.detail[key] = 0;
                    }
                }
            })
        },
        getCommentCount(count){
            this.count = count;
        }
    },
    mounted(){
        this.loadStrategyDetail();
    }
}
</script>

<style lang="less" scoped>
.wapper{
    .crumbs{
        font-size: 13px;
        color: #303133;
    }
    .detail-container{
        h1{
            width: 702px;
            // height: 80px;
            line-height: 45px;
            padding:20px 0;
            white-space: wrap;
            border-bottom: 1px solid #DDDDDD;
        }
        .other{
            height:58px;
            line-height: 58px;
            text-align: right;
            margin-right: 20px;
            span{
                font-size: 14px;
                color: #999;
                &:first-child{
                    margin-right: 25px;
                }
            }
        }
        .content{
            line-height: 22px;//行高控制行距
            font-size: 14px;
            color: #333;//适合人眼看的颜色
            /deep/ img{
                max-width: 100%;
            }
        }
    }
    .about{
        margin:60px 0 30px;
        .comment{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-right: 20px;
            .iconfont{
                color: #FFA000;
                font-size: 30px;
            }
            span{
                margin-top: 5px;
                color: #999999;
                font-size: 14px;
            }
        }
        .share{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-left: 20px;
            .iconfont{
                color: #FFA000;
                font-size: 32px;
            }
            span{
                margin-top: 5px;
                color: #999999;
                font-size: 14px;
            }
        }
    }
}
</style>